import React, { useState } from 'react';
import { Divider, Input } from 'antd';
import { useTranslation } from 'react-i18next';

interface SendCardCollectionProps {
	onChangeCardType?: (e: any) => void;
	errorMessage?: string;
	cardType?: string;
}

const SendCardCollection = (props: SendCardCollectionProps) => {
	const { t } = useTranslation();
	const { onChangeCardType, errorMessage, cardType } = props;

	return (
		<div className="send-card-collection-contanier">
			<p className="title">{t('select-collection-idcard')}</p>
			<div className="button-wrapper">
				<button className={cardType == 'idCard' ? 'button selected' : 'button'} onClick={() => onChangeCardType!('idCard')}>
					<span>{t('id-card')}</span>
				</button>
				<button className={cardType == 'bankCard' ? 'button selected' : 'button'} onClick={() => onChangeCardType!('bankCard')}>
					<span>{t('bank-card')}</span>
				</button>
			</div>
			{errorMessage ? <p className="error-message">{errorMessage}</p> : undefined}
		</div>
	);
};

export default SendCardCollection;
